{% macro BlogList() %}

<!-- 个人空间和动态页面的博客展示内容 -->

<link rel="stylesheet" href="/css/macros/BlogList.css">
<!-- 模拟博客内容 -->
<div class="blog-box">
  <!-- 头像 昵称 日期  的盒子 -->
  <div class="top-box">
    <img class="head-portrait" src="/images/public/位图/我的头像.jpg" alt="">
    <div class="nick-box">
      <a href="#" class="nickname">俱往矣i</a>
      <br>
      <span class="time">2020-11-30</span>
    </div>

    <!-- 下拉选项 -->
    <div class="dropDownButtonBox">
      <img class="dropDownButton" src="/images/BlogList/矢量图/下拉.svg" alt="">
    </div>

  </div>

  <!-- 点击下拉弹出的模态框 删除 -->
  <ul class="deleteBox">
    <li class="option delete">删除</li>
    <li class="option">收藏</li>
    <li class="option">举报</li>
  </ul>

  <!-- 删除弹出的确认框 -->
  <div class="ConfirmationBox">
    <div class="Confirmation">
      <div class="close">×</div>
      <div class="sureBox">
        <img class="sure" src="/images/BlogList/矢量图/确定吗.svg" alt="">
      </div>
      <p class="sureDelete">确定删除吗？</p>
      <div class="bottomBtn">
        <button class="determine">确定</button>
        <button class="cancelBtn">取消</button>
      </div>
    </div>
  </div>

  <!-- 博客内容的盒子 -->
  <div class="bottom-box">
    这是模拟内容
  </div>

  <!-- 博客图片盒子 -->
  <div class="blogImg-box">
    <img src="/images/simulation/位图/模拟用图 (1).jpg" alt="">
    <img src="/images/simulation/位图/模拟用图 (2).jpg" alt="">
    <img src="/images/simulation/位图/模拟用图 (3).jpg" alt="">
    <img src="/images/simulation/位图/模拟用图 (4).jpg" alt="">
    <img src="/images/simulation/位图/模拟用图 (5).jpg" alt="">
    <img src="/images/simulation/位图/模拟用图 (6).jpg" alt="">
  </div>

  <!-- 点赞评论框 -->
  <div class="Liking-box">

    <!-- 点赞 -->
    <div class="Fabulous">
      <div class="FabulousImgBox">
        <img src="/images/BlogList/矢量图/赞.svg" alt="">
      </div>
      865
    </div>

    <!-- 评论 -->
    <div class="comment">
      <div class="FabulousImgBox">
        <img src="/images/BlogList/矢量图/消息.svg" alt="">
      </div>
      78
    </div>

  </div>

  <!-- 评论下拉菜单 -->
  <div class="Fabulous-box">
    <img class="Myportrait" src="/images/public/位图/我的头像.jpg" alt="">
    <div class="reply-inp-box">
      <textarea class="reply-inp" maxlength="100"></textarea>
    </div>
    <button class="comment-btn">评论</button>

    <!-- 评论内容1 -->
    <div class="CommentReply">
      <img class="portrait" src="/images/simulation/位图/模拟头像.jpg" alt="">
      <div class="contentBox">
        <span class="time">2020-12-11 11:15</span><br>
        <p class="comment-data">
          早上好！早上好！早上好！早上好！早上好！早上好！早上好！早上好！
          早上好！早上好！早上好！早上好！早上好！早上好！早上好！
        </p>
      </div>
    </div>

    <!-- 评论内容2 -->
    <div class="CommentReply">
      <img class="portrait" src="/images/simulation/位图/模拟头像.jpg" alt="">
      <div class="contentBox">
        <span class="time">2020-12-11 11:15</span><br>
        <p class="comment-data">
          这个是我的评论内容，今天真的很不错，哈哈哈哈哈
        </p>
      </div>
    </div>

    <!-- 评论内容3 -->
    <div class="CommentReply">
      <img class="portrait" src="/images/simulation/位图/模拟头像.jpg" alt="">
      <div class="contentBox">
        <span class="time">2020-12-11 11:15</span><br>
        <p class="comment-data">
          这个是我的评论内容，今天真的很不错，哈哈哈哈哈
        </p>
      </div>
    </div>

    <!-- 评论内容4 -->
    <div class="CommentReply">
      <img class="portrait" src="/images/simulation/位图/模拟头像.jpg" alt="">
      <div class="contentBox">
        <span class="time">2020-12-11 11:15</span><br>
        <p class="comment-data">
          这个是我的评论内容，今天真的很不错，哈哈哈哈哈
        </p>
      </div>
    </div>

    <!-- 评论内容5-->
    <div class="CommentReply">
      <img class="portrait" src="/images/simulation/位图/模拟头像.jpg" alt="">
      <div class="contentBox">
        <span class="time">2020-12-11 11:15</span><br>
        <p class="comment-data">
          这个是我的评论内容，今天真的很不错，哈哈哈哈哈
        </p>
      </div>
    </div>
  </div>
</div>

<script src="/js/myJS/My_JS.js"></script>
<script>

  // 如果发表评论内容为空提示
  var commentBtn = $Al(".comment-btn");
  var replyInp = $Al(".reply-inp");
  for (let i = 0; i < commentBtn.length; i++) {
    commentBtn[i].onclick = function () {
      if (replyInp[i].value === "") {
        alert("内容为空不能发表！")
      } else {
        alert("评论功能维护中，稍后再试")
      }
    }
  }


  // 博客删除选项的弹出框
  var dropDownButtonBoxS = $Al(".dropDownButtonBox");
  var dropDownShow = true;
  for (let i = 0; i < dropDownButtonBoxS.length; i++) {
    dropDownButtonBoxS[i].onclick = function () {
      if (dropDownShow) {
        dropDownButtonBoxS[i].parentNode.nextElementSibling.style.display = "block";
        dropDownShow = false;
      } else {
        dropDownButtonBoxS[i].parentNode.nextElementSibling.style.display = "none";
        dropDownShow = true;
      }
    }
  }


  // 评论弹出效果
  var comments = $Al(".comment");
  var commentShow = true;
  for (let i = 0; i < comments.length; i++) {
    comments[i].onclick = function () {
      if (commentShow) {
        // 获取到点击元素父级的下一个元素
        comments[i].parentNode.nextElementSibling.style.display = "block";
        commentShow = false;
      } else {
        comments[i].parentNode.nextElementSibling.style.display = "none";
        commentShow = true;
      }
    }
  }


  // 点击删除确认框显示
  var del = $Al(".delete");
  for (let i = 0; i < del.length; i++) {
    del[i].onclick = function () {
      // 确认框关闭
      $(".ConfirmationBox").style.display = "block";
      // 删除弹框隐藏
      $Al(".deleteBox")[i].style.display = "none";
    }
  }


  // 可以通过 × 和取消关闭模态框
  $(".cancelBtn").onclick = function () {
    $(".ConfirmationBox").style.display = "none";
  }
  $(".close").onclick = function () {
    $(".ConfirmationBox").style.display = "none";
  }
  $(".determine").onclick = function () {
    alert("删除功能维护中，稍后再试")
  }

</script>

{% endmacro %}